<template>
  <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color=#1D76D9FF
      text-color="#fff"
      active-text-color="#ffd04b">

    <el-menu-item index="1" @click="toIndex()">个人机构馆</el-menu-item>
    <el-menu-item index="2">个人中心</el-menu-item>

    <div class="loginRegsterBtn">
      <el-dropdown v-if="!isLogin">
        <el-button size="mini" type="primary" @click="login()">
          登录
          <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="login()">立即登录</el-dropdown-item>
            <el-dropdown-item @click="register()">注册</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown v-else>
        <el-avatar :size="35" :icon="UserFilled"/>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </el-menu>
</template>

<script>
import { ArrowDown } from '@element-plus/icons'
export default {
  name: "IndexNavbar",
  components: {
    ArrowDown,
  },
  mounted() {
    let user = JSON.parse(localStorage.getItem('user'))
    if (user != null) {
      this.isLogin = true
    } else {
      this.isLogin = false
    }
  },
  data() {
    return {
      isLogin: false,
      activeIndex: 2
    }
  },
  methods: {
    login() {
      this.$router.push('/user/sign/login')
    },
    register() {
      this.$router.push('/user/sign/register')
    },
    logout() {
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      this.$router.push('/user/sign/login')
    },
    toIndex() {
      window.location.href = '/index'
    }
  }
}
</script>

<style scoped>
.loginRegsterBtn {
    float: right;
    margin-top: 13px;
    margin-right: 16px;
    background-color: transparent;
  }

</style>